<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org">
<head>
    <title th:text="${title}"></title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <!--/* 自定义css */-->
    <link th:href="@{/css/signin.css}" rel="stylesheet"/>

    <!--/* 支持bootstrap */-->
    <link th:href="@{/webjars/bootstrap/5.1.3/css/bootstrap.min.css}" rel="stylesheet"/>
    <script th:src="@{/webjars/bootstrap/5.1.3/js/bootstrap.bundle.min.js}"></script>

    <!--/* Jquery */-->
    <script th:src="@{/webjars/jquery/3.6.0/jquery.min.js}"></script>
</head>
<body>

<form id="loginForm" class="form-signin" method="post" th:action="@{${loginProcessingUrl}}" onsubmit='return submitLoginForm()'>
    <h2 class="form-signin-heading text-center" th:text="${title}"></h2>
    <div id="liveAlertPlaceholder"></div>
    <p>
        <input type="text" id="username" name="username" class="form-control" placeholder="用户名" required autofocus>
    </p>
    <p>
        <input type="password" id="password" name="password" class="form-control" placeholder="密码" required>
    </p>
    <div th:if="${enableCaptcha}" class="input-group mb-3">
        <input type="text" d="captcha" name="captcha" class="form-control" placeholder="验证码" aria-label="验证码" aria-describedby="captcha-addon" required>
        <img class="input-group-text" id="captcha-addon" style="padding: 0" alt="点击更换" title="点击更换" th:src="@{${captchaUrl}}" onclick="switchCaptcha()"/>
    </div>
    <div class="d-grid gap-2">
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
    </div>
</form>

<!--/* captcha JS */-->
<script th:if="${enableCaptcha}" type="text/javascript" th:src="@{/js/captcha.js}"></script>
<script type="text/javascript">
    /**
     * 提交登录请求
     * @returns {boolean} 禁用自动提交（使用Ajax异步提交）
     */
    function submitLoginForm() {
        //提交登录请求
        $.ajax({
            url:  $("#loginForm").attr("action"),
            method: "POST",
            contentType: 'application/x-www-form-urlencoded; charset=UTF-8',
            data: $("#loginForm").serialize(),
            dataType: "json"
        })
            .done(function(respResult) {
                //登录成功则重定向到OAuth2认证端点
                if (100 == respResult.code) {
                    console.log("login success", respResult)
                    window.location.href = respResult.redirectUri;
                }
                //登录失败则弹出失败提示
                else {
                    console.log("login failure")
                    alert(respResult.msg, "danger");
                }

            })
            .fail(function () {
                //登录请求发送失败
                alert("登录请求发送失败！", "danger");
            });

        //禁用自动提交表单
        return false;
    }


    /**
     * 弹出警告
     * @param message 警告消息
     * @param type 警告类型
     */
    function alert(message, type) {
        let alertPlaceholder = document.getElementById('liveAlertPlaceholder');
        //清除原提示
        alertPlaceholder.innerHTML = "";
        //附加新提示
        let wrapper = document.createElement('div')
        wrapper.innerHTML = '<div class="alert alert-' + type + ' alert-dismissible" role="alert">' + message + '<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button></div>';
        alertPlaceholder.append(wrapper);
    }

</script>
</body>
</html>